<template>
  <div>
    <br />
    <a-card class="card-header">
      <a-descriptions title="执行单详情">
        <a-descriptions-item label="加工单号">
          {{ detail.worksheetNum }}
        </a-descriptions-item>
        <a-descriptions-item label="数量">
          {{ detail.productionQuantity }}
        </a-descriptions-item>
        <a-descriptions-item label="开始时间">
          {{ detail.processStartTime }}
        </a-descriptions-item>

        <a-descriptions-item label="商品名称">
          {{ detail.goodsName }}
        </a-descriptions-item>

        <a-descriptions-item label="商品规格">
          {{ detail.specifications }}
        </a-descriptions-item>

        <a-descriptions-item label="商品编号">
          {{ detail.goodsCode }}
        </a-descriptions-item>

        <a-descriptions-item label="工序名称">
          {{ detail.workStageName }}
        </a-descriptions-item>
        <a-descriptions-item label="设备名称">
          {{ detail.equipmentName }}
        </a-descriptions-item>
        <a-descriptions-item label="设备编号">
          {{ detail.equipmentNumber }}
        </a-descriptions-item>
        <a-descriptions-item label="当前投料累计">
          {{ detail.totalCast }}
        </a-descriptions-item>
        <a-descriptions-item label="当前产出累计">
          {{ detail.totalOutput }}
        </a-descriptions-item>
        <a-descriptions-item label="当前坏件累计">
          {{ detail.totalBad }}
        </a-descriptions-item>
        <a-descriptions-item label="上机人员">
          {{ operate }}
        </a-descriptions-item>
        <a-descriptions-item label="状态">
          {{ status }}
        </a-descriptions-item>
      </a-descriptions>
      <a-row :gutter="24">
        <a-col :offset="22">
          <a-button v-if="isShow" type="primary" @click="handleExecute"
            >执行单完成</a-button
          >
        </a-col>
      </a-row>
    </a-card>
    <a-card class="card-header">
      <a-row :gutter="24">
        <a-col>
          <a-button v-if="isShow" type="primary" @click="handleOpen"
            >新建投料</a-button
          >
        </a-col>
      </a-row>
      <br />
      <a-table
        :columns="columns"
        :data-source="columnsData"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
        bordered
        :rowKey="(record, index) => record.id"
      >
        <template slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)" v-if="isShow">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm
            v-if="columnsData.length"
            okText="确定"
            cancelText="取消"
            title="确定删除吗?"
            @confirm="() => handleDelete(record)"
          >
            <a>删除</a>
          </a-popconfirm>
        </template>
      </a-table>
    </a-card>
    <a-card class="card-header">
      <a-row :gutter="24">
        <a-col>
          <a-button type="primary" v-if="isShow" @click="handleOpenProduce"
            >新建产出</a-button
          >
        </a-col>
      </a-row>
      <br />
      <a-table
        :columns="produce"
        :data-source="produceData"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
        bordered
        :rowKey="(record, index) => record.id"
      >
        <template slot="action" slot-scope="text, record">
          <a @click="handleproduceEdit(record)" v-if="isShow">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm
            v-if="produceData.length"
            okText="确定"
            cancelText="取消"
            title="确定删除吗?"
            @confirm="() => handleProduceDelete(record)"
          >
            <a>删除</a>
          </a-popconfirm>
        </template>
      </a-table>
    </a-card>
    <FeedingModal
      ref="modalForm"
      :wsRelationId="wsRelationId"
      :outStoreStatus="outStoreStatus"
      @ok="modalFormOk"
      :worksheetId="worksheetId"
      :sort="sort"
      :userId="userId"
    ></FeedingModal>
    <ProduceModal
      ref="produceForm"
      :wsRelationId="wsRelationId"
      @ok="modalFormOk"
      :worksheetId="worksheetId"
      :sort="sort"
      :userId="userId"
    ></ProduceModal>
    <ExecuteModal
      :wsRelationId="wsRelationId"
      :worksheetId="worksheetId"
      :equipmentNumber="equipmentNumber"
      @ok="modalFormOk"
      ref="excuteForm"
    ></ExecuteModal>
  </div>
</template>

<script>
import { columns, produce } from "./components/tableConfig";
import FeedingModal from "./components/FeedingModal";
import ProduceModal from "./components/ProduceModal";
import ExecuteModal from "./components/ExecuteModal.vue";
import { tableMinxins } from "@/unit/mixins/tableMinxins.js";
import api from "@/api/apiServer";
export default {
  components: { FeedingModal, ProduceModal, ExecuteModal },
  mixins: [tableMinxins],
  data() {
    return {
      columns,
      produce,
      detail: [],
      wsRelationId: "",
      columnsData: [],
      produceData: [],
      params: {},
      processNum: "",
      worksheetId: "",
      sort: "",
      isShow: true,
      userId: "",
      outStoreStatus: "",
      lastOutput: "",
      // userName: "",
      equipmentNumber: "",
      operate: "",
      outStoreQuantity: "",
      wsRelationState: "", //完成状态
      status: "",
    };
  },
  mounted() {
    // this.userName = JSON.parse(localStorage.getItem("userInfo")).userName;
    this.wsRelationId = this.$route.query.wsRelationId;
    this.userId = this.$route.query.userId;
    this.worksheetId = this.$route.query.worksheetId;
    this.sort = this.$route.query.sort;
    this.wsRelationState = this.$route.query.wsRelationState;
    if (this.wsRelationState == 1) {
      this.status = "已完成";
    } else {
      this.status = "未完成";
    }
    let params = {
      wsRelationId: this.wsRelationId,
      worksheetId: this.worksheetId,
      sort: this.sort,
    };
    this.getDetail(params);
    if (this.$route.query.equipmentUserId == 0) {
      this.operate = "暂无上机人员";
    } else {
      this.getUserInfo(this.$route.query.equipmentUserId);
    }
  },
  methods: {
    // 获取上机员
    async getUserInfo(id) {
      const res = await api.UserFindById({ id });
      console.log(res, "renyuan");
      this.operate = res.data.name;
    },
    // 获取列表数据
    async getList(arg) {
      this.getMaterial(this.id);
      this.getOutput(this.id);
    },
    //新建投料
    handleOpen() {
      let that = this;
      if (this.sort == 0) {
        if (that.outStoreStatus == 1) {
          that.$refs.modalForm.title = `剩余${this.outStoreQuantity}`;
          that.$refs.modalForm.modalEdit();

          // this.$confirm({
          //   title: "提示",
          //   content: this.outStoreStatus,
          //   okText: "确认",
          //   cancelText: "取消",
          //   okButtonProps: { style: { display: "none" } },
          // });
        } else {
          that.$refs.modalForm.title = "未备料";
          that.$refs.modalForm.modalEdit();
          // this.$confirm({
          //   title: "提示",
          //   content: `已备料${this.outStoreQuantity}`,
          //   okText: "确认",
          //   cancelText: "取消",
          //   onOk() {

          //   },
          // onCancel() {},
          // });
        }
      } else {
        if (this.lastOutput > 0) {
          // this.$confirm({
          //   title: "上道工序已产出",
          //   content: `上道工序产出数量${this.lastOutput}`,
          //   okText: "确认",
          //   cancelText: "取消",
          //   onOk() {

          //   },
          //   onCancel() {},
          // });
          that.$refs.modalForm.title = `上道工序产出数量${this.lastOutput}`;
          that.$refs.modalForm.modalEdit();
        } else {
          this.$confirm({
            title: "上道工序已产出",
            content: `上道工序产出数量${this.lastOutput}`,
            okText: "确认",
            cancelText: "取消",
            okButtonProps: { style: { display: "none" } },
            onCancel() {},
          });
        }
      }
    },
    //新建产出
    handleOpenProduce() {
      this.$refs.produceForm.title = "产出";
      this.$refs.produceForm.modalEdit();
    },
    //获取详情
    async getDetail(params) {
      console.log(params, 666666);
      const res = await api.SheetoolDetail(params);
      this.detail = res.data;
      this.equipmentNumber = res.data.equipmentNumber;
      this.processNum = res.data.processNum;
      this.lastOutput = res.data.lastOutput;
      this.outStoreQuantity = res.data.outStoreQuantity;
      this.outStoreStatus = res.data.outStoreStatus;

      if (
        res.data.equipmentUserId != this.userId ||
        res.data.equipmentIsUsed == 0 ||
        this.wsRelationState == 1
      ) {
        this.isShow = false;
      }
      // console.log(this.isShow, "JJK");
      this.getMaterial(this.wsRelationId);
      this.getOutput(this.wsRelationId);
    },
    //查看投料详情
    async getMaterial(wsRelationId) {
      const res = await api.materialDetail({ wsRelationId });
      this.columnsData = res.data;
    },
    //查看产出信息
    async getOutput(wsRelationId) {
      const res = await api.outputInfoDetail({ wsRelationId });
      this.produceData = res.data;
    },
    //产出编辑
    handleproduceEdit(record) {
      this.$refs.produceForm.title = "编辑";
      this.$refs.produceForm.modalEdit(record);
    },
    //更新加工单
    async handleUpdate(params) {
      const res = await api.workSheetUpdate(params);
    },
    modalFormOk() {
      let params = {
        wsRelationId: this.wsRelationId,
        worksheetId: this.worksheetId,
        sort: this.sort,
      };
      this.getDetail(params);
    },
    //手动完成
    handleExecute() {
      if (this.wsRelationState == 1) {
        this.$message.success("订单已完成");
      } else {
        this.$refs.excuteForm.title = "手动完成";
        this.$refs.excuteForm.modalEdit();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.card-header {
  margin: 20px 0;
}
.card-content {
  button {
    margin-right: 20px;
  }
}
</style>
